<template>
    <svg class="SvgEle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <template v-for="(item, index) in list">
            <path :d="renderPath(item.from, item.to)" fill="red" stroke="blue" stroke-width="1" />
            <image class="image" v-bind="renderImagePostion(item.from, item.to)" alt="" @click="removeLink(index)" />
            <circle :cx="item.to[0]" :cy="item.to[1]" r="5" style="fill: #ff9100" class="circleView" @mousedown="MoveEvent($event, item)" />
        </template>
    </svg>
</template>
<script setup>
import { ref } from "vue";
import imageData from "./imageData.txt?raw";
import { MoveStart } from "./MoveEvent.js";
const list = ref([
    { from: [60, 60], to: [100, 100] },
    { from: [220, 220], to: [300, 100] },
    { from: [420, 420], to: [300, 100] },
    { from: [220, 220], to: [300, 100] },
    { from: [220, 220], to: [300, 100] },
]);

const DeleteBase64 = imageData;
const removeLink = (index) => list.value.splice(index, 1);

const renderImagePostion = function (StartPoint, EndPoint) {
    var angle = Math.atan2(EndPoint[1] - StartPoint[1], EndPoint[0] - StartPoint[0]);
    return {
        x: StartPoint[0] + Math.cos(angle) * -15 - 10,
        y: StartPoint[1] + Math.sin(angle) * -15 - 10,
        "xlink:href": DeleteBase64,
    };
};

const renderPath = function (StartPoint, EndPoint) {
    var angle = Math.atan2(EndPoint[1] - StartPoint[1], EndPoint[0] - StartPoint[0]);
    var theta = angle * (180 / Math.PI);
    var Path = ["M"];

    const CosP = Math.cos((Math.PI / 180) * (theta + 90));
    const SinP = Math.sin((Math.PI / 180) * (theta + 90));
    const CosM = Math.cos((Math.PI / 180) * (theta - 90));
    const SinM = Math.sin((Math.PI / 180) * (theta - 90));
    const CosA = Math.cos(angle);
    const SinA = Math.sin(angle);

    var x2 = StartPoint[0] + CosP * 2;
    var y2 = StartPoint[1] + SinP * 2;
    Path.push(x2, y2);
    Path.push("L", StartPoint[0] + CosM * 2, StartPoint[1] + SinM * 2);
    var Endx = EndPoint[0] + CosA * -5;
    var Endy = EndPoint[1] + SinA * -5;
    var x4 = Endx + CosM * 2;
    var y4 = Endy + SinM * 2;
    Path.push("L", x4, y4);
    Path.push("L", x4 + CosM * 3, y4 + SinM * 3);
    Path.push(EndPoint[0] + CosA * 5, EndPoint[1] + SinA * 5);
    var x6 = Endx + CosP * 2;
    var y6 = Endy + SinP * 2;
    Path.push("L", x6 + CosP * 3, y6 + SinP * 3);
    Path.push("L", x6, y6);
    Path.push("L", x2, y2, "z");
    var Str = Path.join(" ");
    return Str;
};

const MoveEvent = function (event, item) {
    MoveStart(
        event,
        { x: item.to[0], y: item.to[1] },
        1,
        function (x, y) {
            item.to[0] = x;
            item.to[1] = y;
        },
        function () {}
    );
};

defineExpose({
    SetValue: function () {},
});
</script>
<style lang="less" scoped>
.SvgEle {
    width: 100%;
    height: 100%;
    position: absolute;
    pointer-events: none;
}
.image {
    pointer-events: all;
    width: 20px;
    height: 20px;
}
.circleView {
    cursor: pointer;
    opacity: 0;
    pointer-events: all;
    &:hover {
        opacity: 1;
    }
}
</style>
